<template>
	<div class="minetop">
		<span class="iconfont icon-xiaoxi"></span>
		<span class="iconfont icon-shezhi-xue"></span>
		<img src="img/logo1.png" class="logo1" @click="mycenter()"/>
		<span class="focus"></span>
		<h4 @click="mycenter()">迷鹿DAYTOY<span class="iconfont icon-huiyuan"></span></h4>
		<ul class="minea">
			<li><p>积分</p><span>10</span></li>
			<li><p>下载券</p><span>5</span></li>
			<li><p>文库豆</p><span>0</span></li>
		</ul>
		<ul class="mineb">
			<li>
				<h5>开通VIP</h5>
				<p>百万资料免费领</p>
				<img src="img/mine1.png"/>
			</li>
			<li>
				<h5>立即签到</h5>
				<p>做任务领下载券</p>
				<img src="img/mine2.png"/>
			</li>
		</ul>
	</div>
</template>

<script>
	export default{
		methods:{
			mycenter(){
				this.$router.push("/mycenter");
			}
		}
	}
</script>

<style lang="scss" scoped="scoped">
	.minetop{
		width: 100%;
		height: 2.4rem;
		position: relative;
		.icon-xiaoxi{
			position: absolute;
			top: 0.13rem;
			right: 0.55rem;
			font-size: 0.21rem;
		}
		.icon-shezhi-xue{
			position: absolute;
			top: 0.13rem;
			right: 0.15rem;
			font-size: 0.21rem;
		}
		.logo1{
			margin-left: 0.14rem;
			margin-top: 0.5rem;
			float: left;
		}
		h4{
			font-size: 0.21rem;
			float: left;
			margin-left: 0.16rem;
			margin-top: 0.5rem;
			span{
				font-size: 0.21rem;
				color: #9b9a9a;
			}
		}
		.minea{
			position: absolute;
			height: 0.4rem;
			width: 2.3rem;
			top: 0.93rem;
			left: 0.9rem; 
			display: flex;
			justify-content: space-around;
			li{
				padding: 0 0.18rem;
				height: 0.4rem;
				border-left: 1px solid #e5e6e5;
				position: relative;
				p{
					font-size: 0.13rem;
					color: #868686;
					/* position: absolute;
					top: 0;
					left: 0.18rem; */
				}
				span{
					font-size: 0.14rem;
					margin-bottom: 0;
					position: absolute;
					bottom: 0;
					left: 0.18rem;
				}
			}
			li:nth-of-type(1){
				border-left:none;
			}
		}
		.mineb{
			height: 0.8rem;
			width: 100%;
			position: absolute;
			bottom: 0;
			li{
				width: 1.65rem;
				height: 0.8rem;
				background-color: #FFFFFF;
				float: left;
				position: relative;
				border-radius: 0.05rem;
				h5{
					font-size: 0.17rem;
					margin-top: 0.15rem;
					margin-left: 0.15rem;
				}
				p{
					font-size: 0.13rem;
					color: #828282;
					margin-top: 0.05rem;
					margin-left: 0.15rem;
				}
				img{
					position: absolute;
					right: 0;
					top: 0.1rem;
				}
				
			}
			li:first-child{
				margin-left: 0.15rem;
				margin-right: 0.12rem;
				h5{
					color: #b18d45;
				}
			}
		}
	}
</style>
